<script lang="ts" setup>
import MdiDeleteForeverOutline from "@/components/icon/MdiDeleteForeverOutline.vue";
import { i18n } from "@/locales";
import type { Editor } from "@/tiptap";
import MdiArrowULeftBottom from "~icons/mdi/arrow-u-left-bottom";
import BlockActionButton from "./BlockActionButton.vue";
import BlockActionSeparator from "./BlockActionSeparator.vue";

const props = withDefaults(
  defineProps<{
    selected: boolean;
    editor: Editor;
    getPos: () => number;
    deleteNode: () => void;
  }>(),
  {
    selected: false,
  }
);

function handleInsertNewLine() {
  props.editor.commands.insertContentAt(
    props.getPos() + 1,
    [{ type: "paragraph", content: "" }],
    {
      updateSelection: true,
    }
  );
  props.editor.commands.focus(props.getPos() + 2, {
    scrollIntoView: true,
  });
}
</script>

<template>
  <section
    class="editor-block"
    :class="{ 'is-selected': selected }"
  >
    <div class="editor-block__content">
      <slot name="content"></slot>
    </div>
    <div
      class="editor-block__actions-wrapper"
      :class="{ 'is-visible': selected }"
    >
      <div class="editor-block__actions">
        <slot name="actions"></slot>

        <!-- @vue-ignore -->
        <BlockActionButton
          :tooltip="i18n.global.t('editor.common.button.new_line')"
          @click="handleInsertNewLine"
        >
          <template #icon>
            <MdiArrowULeftBottom />
          </template>
        </BlockActionButton>

        <BlockActionSeparator />

        <BlockActionButton
          :tooltip="i18n.global.t('editor.common.button.delete')"
          @click="deleteNode"
        >
          <template #icon>
            <MdiDeleteForeverOutline />
          </template>
        </BlockActionButton>
      </div>
    </div>
  </section>
</template>

<style lang="scss">
.editor-block {
  position: relative;
  margin-top: 2.25rem; // my-9
  margin-bottom: 2.25rem;

  &__content {
    border-radius: 0.25rem; // rounded
    transition: all 0.2s;
  }

  &__actions-wrapper {
    visibility: hidden;
    position: absolute;
    top: -3rem; // -top-12
    right: 0;
    padding-bottom: 0.5rem; // pb-2

    &.is-visible {
      visibility: visible !important;
    }
  }

  &__actions {
    display: flex;
    height: 2.75rem; // h-11
    flex-direction: row;
    align-items: center;
    gap: 0.125rem; // gap-0.5
    border-radius: 0.5rem; // rounded-lg
    border: 1px solid var(--editor-card-border);
    background-color: var(--editor-panel-bg);
    padding: 0.25rem; // p-1
    box-shadow: var(--editor-box-shadow);
  }

  &:hover {
    .editor-block__content {
      background-color: var(--editor-card-hover-bg);
    }

    .editor-block__actions-wrapper {
      visibility: visible;
    }
  }

  &.is-selected {
    .editor-block__content {
      background-color: var(--editor-card-hover-bg);
    }
  }
}
</style>
